<template>
  <a-layout>
    <a-layout-content :style="{background: '#fff', padding:'24px',margin: 0,minHeight: '280px'}">
      <div class="doc">
        <a-row>
          <a-col :span="6">
            <a-tree
                v-if="level1.length>0"
                :tree-data="level1"
                @select="OnSelect"
                :replaceFields="{title: 'name',key:'id',value:'id'}"
                :defaultExpandAll="true"
            ></a-tree>
          </a-col>

          <a-col :span="18">
            <div :innerHTML="html"></div>
          </a-col>

        </a-row>
      </div>
    </a-layout-content>
  </a-layout>
</template>


<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";
import axios from "axios";
import {message} from "ant-design-vue";
import {Tool} from '@/utils/tool.ts';
import {useRoute} from "vue-router";

export default defineComponent({
  name: 'doc',
  setup() {
    const docs = ref();
    const level1 = ref();
    level1.value = [];
    const route = useRoute();
    const html = ref();

    /**
     * 数据查询
     */
    const handleQuery = () => {

      level1.value = [];
      axios.get("doc/all/" + route.query.ebookId).then((response) => {


        const data = response.data;
        if (data.success) {
          docs.value = data.content;
          level1.value = [];
          level1.value = Tool.array2Tree(docs.value, 0);
        } else {
          message.error(data.message);
        }


      });
    };

    /*
    * 内容查询
    * */
    const handleQueryContent = (id: number) => {
      axios.get("/doc/find-content/" + id).then((response) => {
        const data = response.data;
        if (data.success) {
          html.value = data.content;
        } else {
          message.error(data.message);
        }
      })
    };

    const onSelect = (selectedKeys: any, e: any) => {
      console.log("'selected',selectedKeys,e");
      if (Tool.isNotEmpty(selectedKeys)) {
        handleQueryContent(selectedKeys[0]);
      }
    }

    onMounted(() => {
      handleQuery();
    });

    return {
      level1,
      html,
      onSelect
    }
  }
})
</script>